<template>
	<view class="details">
		<cu-custom :isBack="true" textWeight='600' textSize='16' fhColor="#000" textColor="#000">
			<block slot="content">新闻详情</block>
		</cu-custom>
		<scroll-view scroll-y :style="{height:height-CustomBar+'px'}">
			<view class="title">{{details.title}}</view>
			<view class="subhead">
				<view class="genre">{{details.groupName}}</view>
				<view class="time">发布于{{details.createTime}}</view>
			</view>
			<view class="content">
				<u-parse :content="details.content" v-if="details.content"></u-parse>
				<view class="gurss">猜你想看</view>
				<view class="list">
					<view class="item" v-for="i in list" :key="i.id" @click="toDetails(i.id)">
						<view class="image">
							<img :src="i.coverImage" alt="">
						</view>
						<view class="title">{{i.title}}</view>
						<view class="tip">{{i.groupName}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		Base64
	} from '../../static/lib/base64.js'
	import uParse from "../../components/feng-parse/parse.vue"
	import moment from 'moment'
	export default {
		data() {
			return {
				height: '',
				CustomBar: this.CustomBar,
				// 猜你喜欢列表
				list: '',
				// 新闻内容
				details: '',

			}
		},
		onLoad({
			id
		}) {
			this.height = uni.getSystemInfoSync().windowHeight
			this.getData(id)
		},
		components: {
			uParse
		},
		methods: {
			async getData(id) {
				const data = await this.$http.get(this.api.news.informationDetails, {
					id
				})
				// console.log(res,'res');
				const res = data.data.data
				res.informationVo.createTime = moment(res.informationVo.createTime).format("YYYY-MM-DD")
				this.list = res.informationRecommendVo
				this.details = res.informationVo
				this.details.content = Base64.decode(this.details.content)
				this.details.content = this.details.content.replace(/\"/g, "'")
			},

			// 去新闻详情页
			toDetails(id) {
				this.list = []
				this.details = []
				this.getData(id)
			},

		}

	}
</script>

<style lang="scss" scoped>
	.details {
		height: 100vh;
		background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/bac.png) no-repeat;
		background-size: 100%;

		.title {
			margin: 24rpx 24rpx 0 24rpx;
			width: 702rpx;
			max-height: 96rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 48rpx;

			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.subhead {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 8rpx 24rpx 24rpx;

			.genre {
				width: 128rpx;
				height: 40rpx;
				background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/news/genre.png) no-repeat;
				background-size: 100%;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
			}

			.time {
				width: 208rpx;
				height: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.content {
			width: 750rpx;
			height: 700rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 24rpx;

			.article {}


			.gurss {
				margin: 24rpx 0;
				width: 112rpx;
				height: 28rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				line-height: 28rpx;
			}

			.list {
				// margin: 0 24rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					width: 340rpx;
					height: 284rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
					border-radius: 8rpx;
					margin-bottom: 26rpx;
					position: relative;

					.image {
						width: 340rpx;
						height: 192rpx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						width: 316rpx;
						;
						height: 72rpx;
						margin: 0 auto;
						// margin-top: 10rpx;
						padding-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;

						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.tip {
						width: 112rpx;
						height: 40rpx;
						background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
						border-radius: 2rpx 8rpx 2rpx 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						position: absolute;
						right: -2rpx;
						top: -2rpx;
					}
				}
			}

		}



	}
</style>